<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>手动添加工位</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<link rel="stylesheet" href="/css/workpos.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
</head>
<style>
 ::-webkit-scrollbar-thumb {
  background:#a2a2a2; 
  border-radius: 10px;
  height:50%;

::-webkit-scrollbar{width:6px;}
	body{
		overflow-y: scroll;
	} 
.layui-form-label{
	text-align:left
}
</style>

<body>
<form class="layui-form" id="defaultForm"  lay-filter="employee-form" th:action="@{/app/contractStation/saveList}" th:method="post">
<input type="hidden" id="fkPartition" name="fkPartition" th:value="${partition.id}" />
<input type="hidden" id="stationId" name="stationId" th:value="${stationId}"/>
<input type="hidden" id="contractId" name="contractId" th:value="${contractId}" />
<div class="kb-form-container">
	<div class="layui-form-item">
	    <label class="layui-form-label" style="width:90px;">分区名称</label>
	    <div class="layui-input-block">
	      	<span style="display:inline-block;height:36px;line-height:36px" th:text="${partition.partitionName}"></span>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label" style="width:90px;">预定工位数量</label>
	    <div class="layui-input-block">
	      	<span style="display:inline-block;height:36px;line-height:36px" th:text="${gwCount}" id="gwCount">0</span>个
	    </div>
	</div>
	<div style="width: 100%; height: 100%; position: relative;">
		<header class="contract-select-desk-header flex">
			<div style="font-size: 20px;">工位选择</div>
			<div class="desk-state-container flex-center">
				<div class="desk-state-content flex-center">
					<span class="desk-state-block" style="background-color: rgb(255, 255, 255); border: 1px solid rgb(114, 114, 114);"></span><span>未分配</span>
				</div>
				<div class="desk-state-content flex-center">
					<span class="desk-state-block" style="background-color: rgb(180, 224, 255);"></span><span>所在团队使用</span>
				</div>
				<div class="desk-state-content flex-center">
					<span class="desk-state-block" style="background-color: rgb(245, 245, 245);"></span><span>已分配</span>
				</div>
			
			</div>
		</header>
		<div class="clearfix" style="margin-top: 10px; margin-bottom: 20px;">
			<p class="f-left">已选中 <span style="color: rgb(98, 168, 233); font-size: 16px;" id="chooseCount">0</span>个</p>
			<p class="f-left" style="margin-left: 15px;">剩余可选工位 <span style="color: rgb(98, 168, 233); font-size: 16px;" id="leaveCount">8</span>个</p>
		</div>
		<div class="clearfix" style="margin-top: 10px; margin-bottom: 20px;" id="stations">
			 <!-- <div class="contract-station-number contract-station-number-assigned ">
				<div class="kb-lr-center flex-vcenter">
					<span style="max-width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">A027</span><i class="layui-icon layui-icon-chart-screen"></i>
				</div>
			</div>
			<div class="contract-station-number area-block_active " >
				<div class="kb-lr-center flex-vcenter">
					<span style="max-width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">A027</span><i class="layui-icon layui-icon-chart-screen"></i>
				</div>
			</div> -->
		</div>
	</div>
	<div class="layui-form-item" style="padding:30px">
		<button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">完成</button>
        <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
	</div>
</div>	
</form>
   	<script type="text/javascript">
   	$(function(){
   		getStation();
   		layui.use(['element',"layer","form"], function(){
   			var layer=layui.layer,form = layui.form;			
   				
   			/* form.verify({
   				stationId: function(value, item){ //value：表单的值、item：表单的DOM对象
   				  var count = $("#gwCount").val();
   		      	  if(value != count){
   			       	  return '所选工位数量与填写工位数量不一致';
   			      }
   			  }
   			  
   			}); */
   			
   			//监听提交
   			form.on('submit(formEmployee)', function(data){
   				 var count = $("#gwCount").text();
   				var stations = $(".station-block_active");
   				if(count != stations.length){
   					layer.msg("所选工位数量与填写工位数量不一致");
   				}else{
   					var stationIds = "";
   					var fkPartition = $("#fkPartition").val();
   					var contractId = $("#contractId").val();
   					for(var i =0;i<stations.length;i++){
						stationIds += $(stations[i]).attr("data-id")+"," 
					}
   					var formData = {
   							fkPartition:fkPartition,
   							contractId:contractId,
   							stationIds:stationIds
   					}
   					$.post($("#defaultForm").attr('action'), formData, function(result) {
   	   					parent.layer.msg(result.msg);
   	   					closeLayer();
   	   				}, 'json');
   				}
   				return false;
   			});
   			
   		});
   	})
   	function getStation(){
   		var partitionId=$("#fkPartition").val();
   		var url="/app/projectStation/listdata";
   		jQuery.ajax({
   	        type:"post",
   	        async:false,
   	        url:url,
   	        dataType:"json",
   	        data:{'params[partitionId]':partitionId},
   	        success:function(data){
   	        	//console.log(data.data);
   	        	station(data.data);
   	        }
   	    })
   	}
   	//给剩余个数和已选个数赋值
   	function initGwCount(){
   		var xuanzhong = $(".station-block_active");
   		var normal = $(".contract-station-number-normal");
   		$("#leaveCount").text(normal.length - xuanzhong.length);
   		$("#chooseCount").text(xuanzhong.length);
   	}
   	function station(data){
   		
   		var stationIds = $("#stationId").val();
   		console.log(data);
   		console.log(stationIds);
   		var ids = [];
   		if(stationIds != ""){
   			ids = stationIds.split(",");
   		}
   		var con="";
   		for (var i = 0; i < data.length; i++) {
   			if(data[i].flag == 0){
   				con+='<div class="contract-station-number contract-station-number-assigned " data-id="'+data[i].id+'" >'
					+'<div class="kb-lr-center flex-vcenter">'
					+'<span style="max-width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">'+data[i].stationName+'</span><i class="layui-icon layui-icon-chart-screen"></i>'
					+'</div>'
					+'</div>';
   			}else{
   				var flag = -1;
   				for(var j = 0;j < ids.length;j++){
   					if(ids[j] == data[i].id){
   						flag = 1;
   						con+='<div class="contract-station-number contract-station-number-normal station-block_active " data-id="'+data[i].id+'" onclick=setStation(this)>'
   							+'<div class="kb-lr-center flex-vcenter">'
   							+'<span style="max-width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">'+data[i].stationName+'</span><i class="layui-icon layui-icon-chart-screen"></i>'
   							+'</div>'
   							+'</div>';
   					}
   				}
   				if(flag == -1){
	   				con+='<div class="contract-station-number contract-station-number-normal " data-id="'+data[i].id+'" onclick=setStation(this)>'
					+'<div class="kb-lr-center flex-vcenter">'
					+'<span style="max-width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">'+data[i].stationName+'</span><i class="layui-icon layui-icon-chart-screen"></i>'
					+'</div>'
					+'</div>';
   				}
   			
   				
   			}
   			
   			
   		}
   		$("#stations").html(con);
   		initGwCount();
   	}
   	function setStation(obj){
   		$(obj).toggleClass('station-block_active');
   		initGwCount();
   	}
   	</script>
</body>

</html>